<template>
	<view class="my-message">
		<view class="top-bg"></view>
		<view class="pl-3 pr-3 msg-wrap">
			<view class="flex justify-center mb-2">
				<u-tabs :current="currTab" :list="catgList" lineWidth="90" lineHeight="3" lineColor="#fff"
					:activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="handleMenuChange"></u-tabs>
			</view>
			<view class="mb-3 data-list" >
				<u-list v-show="currTab== catgIdx" v-for="(catgItem, catgIdx) in catgList" :key="'k' + catgIdx" @scrolltolower="scrolltolower" height="1200rpx">
					<u-list-item class="mb-2 p-2 item" v-for="(item,idx) in catgItem.msgList" :key="idx">
						<u--text color="#333" size="30rpx" :text="item.MsgTitle"></u--text>
						<view class="mt-1 mb-2 date">{{item.CreateDate}}</view>
						<u--text color="#666" size="28rpx" :text="item.MsgContent"></u--text>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		msgCatgList,
		msgList
	} from "@/apis/user.js";
	import {
		getTotalPageNum
	} from "@/util";
	export default {
		data() {
			return {
				currTab: 0,
				catgList: [],
				activeStyle: {
					color: '#fff',
					transform: 'scale(1.3)'
				},
				inactiveStyle: {
					color: '#fff',
					transform: 'scale(1)'
				},
				inputStyle: {
					background: '#f1f1f1',
					padding: '6px 8px'
				},
			};
		},
		onLoad() {
			this.fetchCatgData()
		},
		methods:{
			async fetchCatgData(){
				const accountInfo = uni.getStorageSync('accountInfo') || {}
				const res = await msgCatgList({
					OrderCmpyCode: accountInfo.currCmpy ? accountInfo.currCmpy.CmpyCode : ''
				})
				console.log('fetchCatgData', res)
				if (res.MsgCode != 0) return
				this.catgList = res.data.map(item=>{
					item.name = item.CatgName
					item.currPageNo = 1
					item.totalPagesNo = 1
					item.msgList = []
					return item
				})
				this.catgList.map((item, idx)=>{
					this.fetchMsgData(idx)
				})
			},
			async fetchMsgData(cIdx){
				const catgIdx = cIdx || this.currTab
				const MsgType = this.catgList[catgIdx].CatgId
				const PageNo = this.catgList[catgIdx].currPageNo
				const res = await msgList({
					MsgType,
					PageNo,
					PageSize: 10,
					Keyword: '',
				})
				console.log('fetchMsgData', res)
				if (res.MsgCode != 0) return
				const catgList = this.catgList
				catgList[catgIdx].msgList = [...catgList[catgIdx].msgList, ...res.data.AppMessageList] 
				catgList[catgIdx].totalPagesNo = getTotalPageNum(res.data.TotalQty, 10)
				console.log('after', this.msgList, catgList[catgIdx])
			},
			scrolltolower() {
				const catgList = this.catgList
				const currTab = this.currTab
				const currPageNo = catgList[currTab].currPageNo
				const totalPagesNo = catgList[currTab].totalPagesNo
				console.log('scrolltolower',currPageNo,totalPagesNo)
				
				if(currPageNo < totalPagesNo){
					catgList[currTab].currPageNo = currPageNo + 1
					this.catgList = catgList
					this.fetchMsgData()
				}
			},
			handleMenuChange(item) {
				this.currTab = item.index
			},
		}
		
	}
</script>

<style lang="scss">
	.my-message{
		.top-bg {
			width: 100%;
			height: 200rpx;
			background-color: #007aff;
			z-index: -1;
			margin-top: -44px;
		}
		.msg-wrap{
			margin-top: -208rpx;
			::v-deep .u-tabs{
				    z-index: 9999;
			}
			.data-list {
				.item {
					background-color: #fff;
					box-shadow: $s-bg-shadow;
					border-radius: $s-border-radius;
					.date{
						color: #666;
						font-size: 25rpx
						
					}
				}
			}
		}
	}
</style>
